<template>
  <div class="view-container" ref="container" :style="containerStyle">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="view-wrapper">
      <div class="view-top">
        <dv-decoration-10 style="width:30%;height:5px;" />
        <div class="view-title">
          <dv-decoration-8 :color="['#568aea', '#000000']" style="width:25%;height:100%;" />
          <div class="view-title-in">
            <span class="view-title-text" @click="onFullScreen">政治生态监察评估系统</span>
            <dv-decoration-6
              :reverse="true"
              :color="['#50e3c2', '#67a1e5']"
              style="width:60%;height:8px;"
            />
          </div>
          <dv-decoration-8
            :reverse="true"
            :color="['#568aea', '#000000']"
            style="width:25%;height:100%;"
          />
        </div>
        <dv-decoration-10 style="width:30%;height:5px;transform: rotateY(180deg);" />
      </div>

      <div class="view-main" ref="mainRef">
        <div class="chart-list" style="width:30%">
          <div class="chart-list-item" ref="chartRef1" style="height:50%">
            <dv-border-box-12>
              <dv-decoration-7 class="chart-title">
                <span class="text" @click="$router.push('/dashboard/ecology')">生态指数</span>
              </dv-decoration-7>
              <Radar
                :sourceData="chart1.sourceData"
                :height="chart1.height"
                :padding="chart1.padding"
              />
            </dv-border-box-12>
          </div>

          <div class="chart-list-item" ref="chartRef2" style="height:50%">
            <dv-border-box-12>
              <dv-decoration-7 class="chart-title">
                <span class="text">考核占比</span>
              </dv-decoration-7>
              <Pie :sourceData="chart2.sourceData" :height="chart2.height" />
            </dv-border-box-12>
          </div>
        </div>

        <div class="chart-list" style="width:40%">
          <div class="chart-list-item" style="height:100%">
            <dv-border-box-12>
              <dv-decoration-7 class="chart-title">
                <span class="text">三色预警图</span>
              </dv-decoration-7>
              <div class="date">
                {{ date.text }}
              </div>
              <div class="chart6">
                <a-row
                  type="flex"
                  justify="space-between"
                  align="middle"
                  style="width:80%;height:20%;margin-bottom:16px;"
                >
                  <a-col
                    :span="6"
                    :style="{ backgroundColor: item.color }"
                    class="chart6-item"
                    v-for="(item, index) in chart6.sourceData.slice(0, 4)"
                    :key="index"
                    :title="item.inspectionScore"
                  >
                    <span>{{ item.inspectionBranchName }}</span>
                  </a-col>
                </a-row>
                <a-row
                  type="flex"
                  justify="space-between"
                  align="middle"
                  style="width:80%;height:20%;margin-bottom:16px;"
                >
                  <a-col
                    :span="6"
                    :style="{ backgroundColor: item.color }"
                    class="chart6-item"
                    v-for="(item, index) in chart6.sourceData.slice(4, 7)"
                    :key="index"
                    :title="item.inspectionScore"
                  >
                    <span>{{ item.inspectionBranchName }}</span>
                  </a-col>
                </a-row>
                <a-row
                  type="flex"
                  justify="space-between"
                  align="middle"
                  style="width:80%;height:20%;"
                >
                  <a-col
                    :span="6"
                    :style="{ backgroundColor: item.color }"
                    class="chart6-item"
                    v-for="(item, index) in chart6.sourceData.slice(7, 11)"
                    :key="index"
                    :title="item.inspectionScore"
                  >
                    <span>{{ item.inspectionBranchName }}</span>
                  </a-col>
                </a-row>
              </div>

              <div class="chart7">
                <p>{{ chart7.text }}</p>
              </div>
            </dv-border-box-12>
          </div>
        </div>

        <div class="chart-list" style="justify-content:space-between;width:30%">
          <div class="chart-list-item" style="height:33%">
            <dv-border-box-12>
              <dv-decoration-7 class="chart-title">
                <span class="text">等级评定</span>
              </dv-decoration-7>
              <div class="chart5">
                <div class="chart5-item" v-for="(item, index) in chart5.sourceData" :key="index">
                  <div class="count" :style="{ backgroundColor: item.color }">
                    <span>{{ item.count }}</span>
                  </div>
                  <p class="text" :style="{ color: item.color }">{{ item.title }}</p>
                </div>
              </div>
            </dv-border-box-12>
          </div>

          <div class="chart-list-item" ref="chartRef4" style="height:33%">
            <dv-border-box-12>
              <dv-decoration-7 class="chart-title">
                <span class="text">考核排名</span>
              </dv-decoration-7>
              <Bar :sourceData="chart4.sourceData" :height="chart4.height" />
            </dv-border-box-12>
          </div>

          <div class="chart-list-item" ref="chartRef3" style="height:33%">
            <dv-border-box-12>
              <dv-decoration-7 class="chart-title">
                <span class="text">整改落实</span>
              </dv-decoration-7>
              <StackBar :sourceData="chart3.sourceData" :height="chart3.height" />
            </dv-border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import screenfull from 'screenfull';
import Radar from '@/components/chart/inspection/Radar';
import Pie from '@/components/chart/inspection/Pie';
import StackBar from '@/components/chart/inspection/StackBar';
import Bar from '@/components/chart/inspection/Bar';
import { systemService, chartService } from '@/services';

const weekday = ['周日', '周一', '周二', '周三', '周四', '周五 ', '周六'];

const barColorSet = {
  LOW: 'red',
  MIDDLE: 'yellow',
  HIGH: 'lightgreen',
};

export default {
  name: 'Home',

  components: {
    Radar,
    Pie,
    StackBar,
    Bar,
  },

  data() {
    return {
      containerStyle: {},
      loading: true,
      date: {
        text: '',
        timer: null,
      },
      chart1: {
        sourceData: [],
        height: 400,
        padding: [0, 0, 30, 0],
      },
      chart2: {
        sourceData: [],
        height: 300,
      },
      chart3: {
        sourceData: [],
        height: 400,
      },
      chart4: {
        sourceData: [],
        height: 500,
      },
      chart5: {
        sourceData: [
          // 绿、蓝、橙、红
          { title: '优秀', count: 0, color: 'lightgreen' }, // >190
          { title: '良好', count: 0, color: '#3f9be3' }, // 170-189
          { title: '一般', count: 0, color: '#ea9b0c' }, // 150-169
          { title: '差', count: 0, color: '#f5222d' }, // <150
        ],
      },
      chart6: {
        sourceData: [],
      },
      chart7: {
        text: '',
      },
      systemConfig: {},
      year: 0,
      quarter: 0,
    };
  },

  created() {
    // 计算当前年份和季度 
    const quarter = moment().quarter();
    const year = moment().year();

    if (quarter === 1) {
      this.year = year - 1
      this.quarter = 4
    } else {
      this.year = year
      this.quarter = quarter - 1
    }

    this.getAllConfig();
  },

  mounted() {
    this.startTimeCountDown();
    this.getData();
  },

  beforeDestroy() {
    clearInterval(this.date.timer);
    this.date.timer = null;
  },

  methods: {
    onFullScreen() {
      const element = this.$refs.container;
      if (screenfull.isEnabled) {
        screenfull.toggle(element);
      }
    },

    // 获取系统参数
    getAllConfig() {
      systemService.getAllConfig().then(res => {
        if (res.code === '200') {
          this.systemConfig = res.data;
          this.chart7.text = res.data.screenText;
        }
      });
    },

    getData() {
      const p1 = this.getChart1Data();
      const p2 = this.getChart2Data();
      const p3 = this.getChart3Data();
      const p4 = this.getChart4Data();
      Promise.all([p1, p2, p3, p4]).then(() => {
        this.loading = false;

        this.$nextTick(() => {
          this.chart1.height = this.$refs.chartRef1.offsetHeight - 80;
          this.chart2.height = this.$refs.chartRef2.offsetHeight - 80;
          this.chart3.height = this.$refs.chartRef3.offsetHeight - 80;
          this.chart4.height = this.$refs.chartRef4.offsetHeight - 80;

          const width = this.$refs.container.parentNode.offsetWidth;
          console.log('width-----', width);
          const scale = width / 1920;
          this.containerStyle = { transform: `scale(${scale})` };
          // this.$refs.container.$forceUpdate();
        });
      });
    },

    getChart1Data() {
      const params = {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: this.year,
        inspectionCycleNumber: this.quarter,
      };
      return new Promise(resolve => {
        chartService.getEcologyChartData(params).then(res => {
          if (res.code === '200') {
            const { year, inspectionCycle, inspectionCycleNumber } = res.data;
            const quarter = `${year}年第${inspectionCycleNumber}${inspectionCycle}`;
            this.chart1.sourceData = res.data.regulationDimension.map(ele => {
              return {
                item: ele.regulationContent,
                [quarter]: ele.totalScore,
              };
            });
            resolve();
          }
        });
      });
    },

    getChart2Data() {
      const params = {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: this.year,
        inspectionCycleNumber: this.quarter,
      };
      return new Promise(resolve => {
        chartService.getRatioChartData(params).then(res => {
          if (res.code === '200') {
            this.chart2.sourceData = res.data.deptList.map(item => {
              return {
                deptName: item.deptName,
                deptCount: item.eventCount,
              };
            });

            resolve();
          }
        });
      });
    },

    getChart3Data() {
      const params = {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: this.year,
        inspectionCycleNumber: this.quarter,
      };

      return new Promise(resolve => {
        chartService.getBarChartData(params).then(res => {
          if (res.code === '200') {
            const correctList = res.data.branchInfos.map(ele => {
              return {
                branch: ele.branchName,
                type: '已整改',
                count: ele.eventCorrectedCount,
              };
            });
            const unCorrectList = res.data.branchInfos.map(ele => {
              return {
                branch: ele.branchName,
                type: '未整改',
                count: ele.eventUnCorrectCount,
              };
            });
            this.chart3.sourceData = [...unCorrectList, ...correctList];
          }

          resolve();
        });
      });
    },

    getChart4Data() {
      const params = {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: this.year,
        inspectionCycleNumber: this.quarter,
        type: '1',
      };
      return new Promise(resolve => {
        chartService.getBarChartData2(params).then(res => {
          if (res.code === '200') {
            // 优秀/良好/一般/差
            const countList = [0, 0, 0, 0];
            const scoreRule = [190, 170, 150];
            this.chart4.sourceData = res.data.items.map(item => {
              if (item.inspectionScore >= scoreRule[0]) {
                countList[0]++;
              } else if (item.inspectionScore >= scoreRule[1]) {
                countList[1]++;
              } else if (item.inspectionScore >= scoreRule[2]) {
                countList[2]++;
              } else {
                countList[3]++;
              }
              return {
                branch: item.inspectionBranchName,
                value: item.inspectionScore,
              };
            });

            this.chart5.sourceData = this.chart5.sourceData.map((item, index) => {
              return {
                ...item,
                count: countList[index],
              };
            });

            this.chart6.sourceData = res.data.items.map(item => {
              const color = (val => {
                if (val < 190) return barColorSet.LOW;
                if (val < 195) return barColorSet.MIDDLE;
                return barColorSet.HIGH;
              })(item.inspectionScore);

              return { ...item, color };
            });

            resolve();
          }
        });
      });
    },

    // 实时日期显示
    startTimeCountDown() {
      if (this.date.timer) {
        clearInterval(this.date.timer);
      }
      this.date.timer = setInterval(() => {
        const date = moment().format('YYYY-MM-DD HH:mm:ss');
        const day = weekday[moment().format('d')];
        this.date.text = `${date} ${day}`;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
